<template>
    <h1>excel导入 <el-button @click="upFile">文件导入</el-button></h1>
    <input hidden ref="inpRef" type="file" @change="inpChange" />

    <el-table :data="tabelData" style="width: 100%">
        <el-table-column type="index" width="50" />
        <el-table-column prop="brand" label="品牌" width="180" />
        <el-table-column prop="category" label="分类" width="180" />
        <el-table-column prop="desc" label="描述" />
    </el-table>
</template>

<script>
import * as XLSX from "xlsx/xlsx.mjs";
export default {
    data() {
        return {
            tabelData: [],
        };
    },
    methods: {
        // 按钮的点击事件, 点击的时候触发 input 框的点击事件
        upFile() {
            this.$refs.inpRef.click();
        },

        // 更改了 input 框文件内容的时候会触发
        inpChange(e) {
            // console.log(e.target.files)

            // 1. 获取到上传的文件
            const file = e.target.files[0];

            // 2. 创建一个文件加载器
            const reader = new FileReader();

            // 3. 指定 解析/加载 的文件
            reader.readAsBinaryString(file);

            const that = this;
            // 4. 监听 解析完毕的事件
            reader.onload = function () {
                // 二进制数据流已经转换完毕, 我们需要将这个数据转换为我们认识的格式 json
                // console.log(reader.result)

                // 4.1 借助 第三方包 XLSX 帮助我们解析 二进制数据流
                const box = XLSX.read(reader.result, { type: "binary" });

                // console.log('转换完毕的数据: ', box)
                // 4.2 存储我们转换完毕的数据
                let excelInfo = box.Sheets.sheet;

                // 4.3 将我们看不懂的数据 转换为 json 格式
                excelInfo = XLSX.utils.sheet_to_json(excelInfo);

                // console.log(excelInfo);
                that.tabelData = excelInfo;
            };
        },
    },
};
</script>
